ECE5725 Final Project

Introduction

In this semseter, we were getting familiar with Linux operating system through the previous four lab sessions, which is the most secure kernel, making it safe,flexiabe and reliable as an OS for servers. In this project, we are using the Raspberry Pi,a 4-core ARM CPU, 2G RAM, fully functionlized Linux machine. A thinking grows up to our minds that we can use RPi 4 as the server for a web application which is applied to generate the Linux programming environment. Then the next decision required to be consider is what kind of functionality of the website are we going to design. As new cornell students, when we first came here, we found that a lot of stuffs we need to buy for living.  It is a huge expense if we buy all these new daily necessities online, thus the deman of a second-had trading platform becomes more essential. Therefore, the first thinking raised is to construct a platform which could enable the students to sell their useless stuffs and other students to buy.                       

Design

Firstly, we need to configure the Linux system which includes installing Ubuntu on RPi4 to support the 64-bit MongoDB and installed all the platform and environment for JavaScript platform which are required for the project, such as MongoDB and Node.js. Next, a simple full-stack app was designed on RPi as the prototype of the final app, which should includes the functions of CURD (create, update, read and delete) of text post, enabling the users to edit their posts. Then, we developed an image uploading/editing/deleting/storing system which allows the users to upload images of their selling items. The next step is developing a user login system that parses the username to check if it is a cornell email address and send out the verification code to the users. The user interface of websites was improved, working with the domain name system and the network address translation system to allow users outside the LAN to visit the website. Finally, the stability and functionality of the whole system has been improved by using bootstrap to develop the front-end structure and webpage layout. The main page is fulling of the pictures uploaded by different users and the prices of each item and its information.                                          

        For the login in system, we make two sections for the new users to sign up and the other for existed users to log in. During the signing up progress, the verification code will be                sent to the certain email address to ensure that is a valid one and we also check the suffix of address which is '.cornell.edu' to make sure the user is a cornellian.              

      The verification codes will be sent to the users which are a bit long and the design here is that when the users did not enter the codes, they cannot press the sign up button to make        sure the email address ia valid.                 

     After signing up, the users could upload the information of the stuffs they would like to sell and their information are also presented on the item showing page to enable the buyer            seller to contact each other because we did not design the purchase function in our website.      

      The overall software system also incude the images upload page which is designed for the users to add the prices, description and more other details about the items and also an           button shown at the top section of the web page for users to make some changes for their uploaded pictures, for example changing the prices. The design code here is making              that only the user who post these pictures could see the buttons for edit or delete, what could only be seen by others are the decription, prices and the buyer contacting information.        We also tried our web application on our phones which could also work well and the photos could also be uploaded successfully, so our web page has higher flexibility. The whole          function of the web page has been contructed until now and it was applied to be tested.                                           

Testing & Result

 1. Frameworks

 The installation part was actually quite confusing. At the beginning, I did not consider to use Ubuntu and thought that using raspberry pi system is fine. And I also used the LAMP stack (Linux, Apache, MySql, Php) and successfully installed them on the RPi at first. Then I found out that if we decide to keep using LAMP, I have to learn php, which is a language I am not familiar with at all. I am using Java, python, Javascript for different courses or projects at the same time, it will be a disaster to add the fourth one. For this reason, I decided to use the MERN stack, with which all languages I need is Javascript, and the data in mongoDB is in the JSON format that I am familiar with.

 However, when installing the MERN stack, I met serval troubles. First, the new versions of MongoDB only support 64-bit operating systems, but Raspberry Pi is 32-bit. I tried to use the older one (v2.0) but Node.js does not fit it. I did some research online, luckily the RPI 4’s CPU is 64-bit, it is the problem of OS, so we had to install an Ubuntu on it. After installing Ubuntu, I kept going with installing MongoDB, at this time, I find out that RPI doesn’t support the latest version of MongoDB, v5.0, so it took me a while to install the older version (v4.4) and configure so that the “sudo apt-get upgrade” will not automatically update the MongoDB to v5.0, which will break down the whole app.

2. Image uploading 

 One main feature of our web app is receiving users’ images of their posts and storing them into the database. For convenience, we do not want to create a specific path for every image, so we use the Multer-GridFS library of Node.js to receive images from the multi-part-form input of the front-end and cur each image into many chunks and store chunks into the MongDB database. However, Multer-GridFS requires that files must be transferred from form types rather than JSON which is used as the main datatype for our RESTful APIs. We solve this problem by adjusting the frontend and putting all post information like title, description, price and images into the Form Object of React.js before sending to the backend. When the backend receives the request, it uses Multer-GridFS to extract the image files and then transform the remaining data into JSON for the further processing.

3.  JSON Web Token

 When users browse different pages of our web app, we need to keep the login state as we definitely do not want users to log in every time they go to a new page. In this case, we need to generate a JSON Web Token from the backend and send it to users’ browser when they first login.

 When the frontend receives a valid JWT from the server, it stores it into the local storage and then refresh the page. After refreshing, the frontend will send the JWT to the server to check whether it is valid to update the login state. However, we came across a problem that the frontend cannot transit to the logged in state even though the backend has surely sent a valid JWT to the frontend. This problem is especially serious when we use smartphones or iPads to visit the web app.

 I debugged this problem for nearly a whole day and then I found out that it takes some time for the browser to write the JWT into the local storage, and if the web page refreshes immediately after it receives a JWT from the backend, it does not have enough time to store it correctly into the local storage. Then suddenly, I recognized why most website have a timer to make the webpage wait for few seconds before refreshing after logging in. I solved this problem by introducing a delay before refreshing, just like most web apps do.

4.  Email Verification Section

 We want to make sure that only Cornellians can get access to our website by signing up a new account with their unique Cornell NetID. In this case, we need to send verification code to Cornell Emails to verify identities. This is a tricky part as we need to use STMP protocol to send emails with Node.js. For the verification code, we use a similar approach in 3., that the server generates a JWT which contains the information of the email account and sends it to users’ Cornell email. After users receive it, they can copy and paste it into the signup system and create a new account on our website.

 Another problem we met regarding the email verification is that we need to use a third-party email system such as Gmail, Outlook, Yahoo to send emails. At first, I used my Gmail account by I met Gmail account security problem that I cannot send emails using STMP on Node.js. For this reason, I created a new Outlook account and used it as a token sender. However, I met another problem that my Outlook account reached the daily limit of sending emails and got suspended. Finally, after I used Yahoo, this problem was solved as a single Yahoo account can send 500 emails each day. But for long term consideration, when the number of user grows, a good choice will be develop our own email server and send verification codes with this server without any limitation.

Conclusion  

 Overall, a software platform for second-hand trade for Cornell student was constructed with the completed user login in system and the emails for verfication codes. At first, we only designed the login in system which could verify the email address on if it is a cornell email address. But the overall structure designing time is much less than expected, hence we got a little more time to focus on building the verification codes sending system which leads to large improvements. During the progress, we met lots of issues when designing the frontend, for example the main page composition does not perform as expected and that spends more time to make improvements. Although we met lots of problems when we completing this project, we got satisfied results for a "full-stackly" web application which does not have the capability to enable too many users. However, we didn't build a router to achieve the Network Address Translation, hence our website could only be used under the cornell wifi or using vpn at home.  And also for the time management part, we spent more time in installing part which causes the less time left for other tasks. For further deveopment, we could make more improvements on designing a more flexiable system which could enable everyone not under cornell wifi to login in the website.                                                                

Parts List

• Raspberry Pi $35.00

Total: $35.00

References